<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2323</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
{ margin:0 auto; width:320px; height:100px; border:1px solid #F00}
	
</style>
<div class="container" id="app">
    <div class="row clearfix">
        <div class="col-md-12">
            <div class="page-header">
                <h1>
                    <small>账户表列------显示所有账户</small>
                </h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 column">
                <span>亲爱的管理员，欢迎来到账户管理系统</span>
            </div>

           
            <div class="col-md-4 column" style="margin-left: 25rem;">
                <form  style="float:right" class="form-inline">
                    <span style="color:red;font-weight: bold"></span>
                    <input v-model="tranId" type="text" class="form-control" name="queryCustomerName" placeholder="请输入要查询的账户ID" >
                    <a class="btn btn-primary" v-bind:href="'detail.html?id='+tranId">查询</a>
					<a class="btn btn-primary" href="indextest-master.html">返回首页</a>
                </form>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12">
            <table class="table table-hover table-striped" >
                <thead>
                <tr>
                    <th>账户编号</th>
                    <th>账户名</th>
                    <th>账户密码</th>
                    <th>账户权限</th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="Customer in commodityArray">
                        <td><input type="text" v-model="Customer.accountId" disabled></td>
                        <td><input type="text" v-model="Customer.accountAccount"/></td>
                        <td><input type="text" v-model="Customer.accountPassword"/></td>
                        <td>
						<div  style="width:60px;height: 20px;float: left; "><input  v-bind:name="'power'+Customer.accountId" v-model="Customer.accountPower" type="radio"  value="1" >管理员</div>
						<div   style="width:60px;height: 20px;float: left;"><input  v-bind:name="'power'+Customer.accountId" v-model="Customer.accountPower" type="radio" value="2"  >顾客</div>
						<div  style="width:60px;height: 20px;float: left;"><input v-bind:name="'power'+Customer.accountId" v-model="Customer.accountPower" type="radio"  value="3" >职工</div>		
						</td>
                        <td>
                            <button class="btn btn-primary" v-on:click="update(Customer.accountId,Customer.accountAccount,Customer.accountPassword,Customer.accountPower)">更新</button>
							<button class="btn btn-primary" v-on:click="deleteItem(Customer.accountId)">删除</button>
                        </td>    
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script src="./assets/js/vue.js"></script>
		<script src="./assets/js/axios.min.js"></script>
		<script src="./assets/js/const.js"></script>
	<script>
			var config={
				"el":"#app",
				"data":{
					
					"commodityArray":[],
					"idArray":[],
					"accountArray":[],
					"tranId":""
				},
				"methods":{
					"selectCommodity":function(){
						var serverUrl=baseUrl+"/account/selectAll";
						console.log(serverUrl);
						axios.get(serverUrl)
						.then(function(response){
							var serverResult=response.data;
							//serverResult有3个属性，商品数据放在data中
							var commodityList=serverResult.data;
							//在then这个函数中访问data中的变量，要加this.vue
							this.vue.commodityArray=commodityList;
						})
						.catch(function(response){
							
						})
					},
					"deleteItem":function(id){
						var serverUrl=baseUrl+"/account/deleteaccountById?id="+id;
						axios.get(serverUrl)
						.then(function(response){
							var code=response.data.code;
							if(code==0){
								window.alert("删除成功");
								this.selectCommodity();
								
							}else{
								window.alert("删除失败");
								this.selectCommodity();							
							}
						})
						.catch(function(response){
							
						});
					},
					"selectItemById":function(id){
						var serverUrl=baseUrl+"/account/selectById?id="+id;
						axios.get(serverUrl)
						.then(function(response){
						this.vue.commodityArray=response.data.data;
						})
						.catch(function(response){
							
						});
					},
					"update":function(id,user,pwd,power){
						var serverUrl=baseUrl+"/account/updateaccount?"
						+"accountAccount="+user
						+"&accountId="+id
						+"&accountPassword="+pwd
						+"&accountPower="+power;
						console.log(serverUrl);
						axios.get(serverUrl)
						.then(function(response){
						var code=response.data.code;
						if(code==0){
							//跳转到首页itemIndex.html,通过地址栏访问首页
							//location.href="itemIndex.html";
							this.selectCommodity();
							window.alert("GOOD");
						}
					})
						.catch(function(response){
							
						});
					},
				},
				"mounted":function(){
					this.selectCommodity();
				}
			};
			var vue=new Vue(config);	
			</script>
</html>